var myChart_1 = echarts.init(document.getElementById('datediv1'), null, {
    width: 800,
    height: 400,
});

fetch('php/get-date-page.php?type=1')
    .then(response => response.json())
    .then(data => {
        var option = {
            xAxis: {
                data: data.map(item => item['g_type'])
            },
            yAxis: {},
            series: [
                {
                    type: 'bar',
                    data: data.map(item => item['g_count'])
                }
            ]
        };

        myChart_1.setOption(option);
    })
    .catch(error => console.error('Error:', error));

var myChart_2 = echarts.init(document.getElementById('datediv2'), null, {
    width: 800,
    height: 400,
});
fetch('php/get-date-page.php?type=2')
    .then(response => response.json())
    .then(data => {
        var option = {
            series: [
                {
                    type: 'pie',
                    data: data.map(item => ({
                        name: item['ustatus'],
                        value: item['u_count']
                    }))
                }
            ]
        };

        myChart_2.setOption(option);
    })
    .catch(error => console.error('Error:', error));


var myChart_3 = echarts.init(document.getElementById('datediv3'), null, {
    width: 800,
    height: 400,
});

fetch('php/get-date-page.php?type=3')
    .then(response => response.json())
    .then(data => {
        var option = {
            xAxis: {
                type: 'category',
                data: data.map(item => item['message_date'])
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: data.map(item => item['message_count']),
                    type: 'line'
                }
            ]
        };

        myChart_3.setOption(option);
    })
    .catch(error => console.error('Error:', error));
